<template>
  <el-table
    ref="multipleTable"
    v-loading="loading"
    :data="tableData"
    @selection-change="handleSelectionChange"
    border
    :max-height="tableHeight"
  >
    <el-table-column
      type="selection"
      width="55"
      align="center"
      v-if="isSelect"
    />
    <el-table-column
      :label="$t('employer_name')"
      align="center"
      prop="employerName"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      :label="$t('performance_group')"
      align="center"
      prop="performanceGroupName"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      :label="$t('performance_appraisal_name')"
      align="center"
      prop="performanceName"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      :label="$t('performance_code')"
      align="center"
      prop="performanceCode"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      :label="$t('remarks')"
      align="center"
      prop="remark"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      :label="$t('total_score')"
      align="center"
      prop="performanceTotalScore"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      :label="$t('number_of_questions')"
      align="center"
      prop="questionsQuantity"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      :label="$t('reviewed_by')"
      align="center"
      prop="reviewerNickName"
      :show-overflow-tooltip="true"
    />

    <slot></slot>
  </el-table>
</template>

<script>
export default {
  name: "vacationTable",
  dicts: ["vacation_type"],
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    isSelect: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      checkVacationList: [],
    };
  },
  watch: {
    checkVacationList: {
      handler(newValue) {
        if (this.tableData.length && newValue.length) {
          let list = [];
          this.tableData.forEach((item) => {
            this.checkVacationList.forEach((val) => {
              if (val.id === item.id) {
                list.push(item);
              }
            });
          });
          if (list.length) {
            this.$nextTick(() => {
              list.forEach((row) => {
                this.$refs.multipleTable.toggleRowSelection(row, true);
              });
            });
          }
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.checkVacationList = selection;
      this.$emit("handleSelectionChange", selection);
    },
  },
};
</script>
